

<template>
  <div class="tabImgCon" :style="{'height':'auto','width':width}">
    <div style="width: 100%;height: 100%;">
      <div style="position:relative;width: 100%;overflow: hidden;background: #fff" :id="boxHeader">
        <!--平面图标记区域-->
        <div
          :id="targetObj"
          style="position:relative;transform-origin:center;width: 100%;height: 100%"
        >
          <img :src="url" @load="imgload" />
          <div
            v-show="showPoint"
            class="custom-dot"
            v-for="(item,index) in  points"
            :style="{'left':(item.left || 0)+'px','top':(item.top || 0)+'px'}"
            :key="index"
            :class="!item.old&&needNewColor?'new':''"
          >
            <span v-if="showPoint">{{index+1}}</span>
          </div>
        </div>
      </div>
    </div>
    <!--点标记结果-->
    <slot name="points-res" :data="points" v-if="!!allSwitch">
      <ul class="ly_flex ly_flex_wrap_wrap point-lists">
        <li
          v-for="(item,index) in  points"
          :key="index"
          :class="currentPointId == index + 1  ? 'active' : ''"
          @click="positionClick(item,index+1)"
          style="width: calc(20% - .1rem);margin: .05rem;box-sizing: border-box;height: .5rem;border: 1px solid #f1f1f1;"
        >
          点{{index + 1}}
          <i
            class="iconfont iconqingchu point-del"
            v-if="!readonly&&currentPointId == index + 1 && (!item.old||type=='edit')"
            @click.stop="delPoint(item,index)"
          ></i>
        </li>
      </ul>
    </slot>
  </div>
</template>
<script>
import cat from "#/assets/js/scale/cat.touchjs.js";
// 规定图纸比例为3:2  900*600，比例按这个走
export default {
  name: "MapShow",
  props: {
    // 平面图地址
    url: {
      type: String,
      default: () => {
        return "";
      }
    },
    // 标记点位
    points: {
      type: Array,
      default: () => {
        return [];
      }
    },
    type: {
      type: String,
      default: ""
    },
    // 标记点位
    needNewColor: {
      type: Boolean,
      default: false
    },
    //是否单个标点
    single: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: "100px"
    },
    width: {
      type: String,
      default: "100px"
    },
    // 是否显示标点
    showPoint: {
      type: Boolean,
      default: true
    },
    //图片下面的点位列表是否可以点击
    enableClick: {
      type: Boolean,
      default: false
    },
    //图片下面的点位列表是否可以点击
    // 只读模式
    readonly: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: "points",
    event: "change"
  },
  data() {
    return {
      currentPointId: "",
      scale: 1, // 缩放比例
      left: 0, // 定位left
      top: 0, // 定位right
      showImgBoxAreaRate: 1, //缩放比例
      targetObj: "",
      boxHeader: "",
      imgId: "",
      allSwitch:false,
    };
  },
  created() {
    this.beforeInit()
    console.log(this.points)
  },
  mounted() {},
  methods: {
    resetId() {
      this.currentPointId = "";
    },
    imgload(){
      this.allSwitch = true;
    },
    beforeInit(){
      this.targetObj = this.$A.getUUID();
      this.boxHeader = this.$A.getUUID();
      this.$nextTick(o => {
        this.init(this.targetObj, this.boxHeader);
      });
    },
    //初始化设置
    init(targetObj, boxHeader) {
      // let img = $("#"+this.imgId)
      // this.targetObj = img[0].getAttribute('fId'),this.boxHeader = img[0].getAttribute('pId')
      let $targetObj = $("#" + targetObj);
      //在这里设置显示图片区域的高
      //获取区域宽度
      let ImgBoxW = $("#" + boxHeader)[0].clientWidth;
      this.showImgBoxAreaRate = ImgBoxW / 900;
      //初始化设置
      cat.touchjs.init($targetObj, (left, top, scale, rotate) => {
        $("#left").text(left);
        $("#top").text(top);
        $("#scale").text(scale);
        $("#rotate").text(rotate);
        this.scale = scale;
        this.left = left;
        this.top = top;
        $targetObj.css({
          left: left,
          top: top,
          transform: "scale(" + scale + ") rotate(" + rotate + "deg)",
          "-webkit-transform": "scale(" + scale + ") rotate(" + rotate + "deg)"
        });
        $("#" + boxHeader).css({
          height: "600px",
          width: "900px",
          transform: "scale(" + this.showImgBoxAreaRate + ")",
          "-webkit-transform": "scale(" + this.showImgBoxAreaRate + ")",
          "transform-origin": "left top"
        });
        $("#" + boxHeader)
          .parent()
          .css({
            height: 600 * this.showImgBoxAreaRate + "px"
          });
      });
      //初始化拖动手势
      cat.touchjs.drag($targetObj, (left, top, type, event) => {
        if (type == "drag") {
          /* if (this.scale == 1) {
          }else {
            if (!this.readonly) {
              !this.single &&
                this.points.push({
                  left: (event.position.x - 15) / this.scale,
                  top: (event.position.y - 15) / this.scale
                });
              this.single &&
                (this.points = [
                  {
                    left: (event.position.x - 15) / this.scale,
                    top: (event.position.y - 15) / this.scale
                  }
                ]);
              this.$emit("change", this.points);
            }
          }*/
        } else {
          if (!this.readonly) {
            !this.single &&
              this.points.length < 60 &&
              this.points.push({
                left:
                  (event.position.x - 5) / this.scale / this.showImgBoxAreaRate,
                top:
                  (event.position.y - 5) / this.scale / this.showImgBoxAreaRate
              });
            this.single &&
              (this.points = [
                {
                  left:
                    (event.position.x - 5) /
                    this.scale /
                    this.showImgBoxAreaRate,
                  top:
                    (event.position.y - 5) /
                    this.scale /
                    this.showImgBoxAreaRate
                }
              ]);
            this.$emit("change", this.points);
          }
        }
      });
      //初始化缩放手势
      // cat.touchjs.scale($targetObj, scale => {
      //   $("#scale").text(scale);
      //   this.scale = scale;
      // });
      cat.touchjs.tap($targetObj, event => {
        if (!this.readonly) {
          !this.single &&
            this.points.length < 60 &&
            this.points.push({
              left:
                (event.position.x - event.target.x - 5) /
                this.scale /
                this.showImgBoxAreaRate,
              top:
                (event.position.y - event.target.y - 5) /
                this.scale /
                this.showImgBoxAreaRate
            });
          this.single &&
            (this.points = [
              {
                left:
                  (event.position.x - event.target.x - 5) /
                  this.scale /
                  this.showImgBoxAreaRate,
                top:
                  (event.position.y - event.target.y - 5) /
                  this.scale /
                  this.showImgBoxAreaRate
              }
            ]);
          this.$emit("change", this.points);
        }
      });

      //初始化旋转手势
      // cat.touchjs.rotate($targetObj, function (rotate) {
      //   $('#rotate').text(rotate);
      // });
    },
    tap(event) {
      // if (!this.readonly) {
      //   this.points.push({
      //     left: (event.position.x - 15) / this.scale,
      //     top: (event.position.y - 15) / this.scale
      //   });
      //   this.$emit("change", this.points);
      // }
    },
    // 点位删除
    delPoint(item, index) {
      this.$emit("getDelPoint", { point: item, pIndex: index + 1 });
      this.points.splice(index, 1);
      this.currentPointId = null;
      this.$emit("change", this.points);
    },
    positionClick(item, index) {
      if (!this.enableClick) {
        return;
      }
      this.currentPointId = index;
      item.pIndex = index;
      this.$emit("click", item);
    },
    // 重置
    reset() {
      let data = {
        left: 0,
        top: 0,
        scale: 1,
        rotate: 0
      };
      //本地存储
      window.localStorage.cat_touchjs_data = JSON.stringify(data);
      window.location = window.location;
    }
  }
};
</script>

<style lang="scss">
.tabImgCon {
  /*height: 300px;*/
  /*width: 400px;*/
  position: relative;
  .dotTab {
    height: 40px;
    width: 50px;
    border: 1px solid #ddd;
    float: left;
    line-height: 40px;
    text-align: center;
  }
  .custom-dot {
    height: 0.3rem;
    width: 0.3rem;
    border-radius: 50%;
    position: absolute;
    background-color: #1890ff;
    cursor: pointer;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 0.3rem;
    color: #fff;
  }
  .custom-dot.new {
    background-color: #ff8a1b;
  }
  .point-lists {
    margin: 0 -0.05rem;
    margin-top: 10px;

    li {
      background: #fff;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    li.active {
      background: #ddd;
    }
    .point-del {
      position: absolute;
      right: -0.05rem;
      top: -0.1rem;
    }
  }
}
</style>
